<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('基础示例')}`">{{ $t('基础示例') }}</t>
        </template>
        <div style="width: 300px;color:#666;">
            <sib-item v-model="value" :props="props" @change="change"></sib-item>
        </div>
        <div style="color:#666;">
            <p>v-model 绑定值：{{ value }}</p>
        </div>
    </example>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const options = [
            {
                value: 'zhinan',
                label: '指南',
                children: [
                    {
                        value: 'shejiyuanze',
                        label: '设计原则',
                        children: [
                            {
                                value: 'yizhi',
                                label: '一致',
                            },
                            {
                                value: 'kekong',
                                label: '可控',
                            },
                        ],
                    },
                    {
                        value: 'daohang',
                        label: '导航',
                        children: [
                            {
                                value: 'cexiangdaohang',
                                label: '侧向导航',
                            },
                            {
                                value: 'dingbudaohang',
                                label: '顶部导航',
                            },
                        ],
                    },
                ],
            },
            {
                value: 'zujian',
                label: '组件',
                children: [
                    {
                        value: 'basic',
                        label: 'Basic',
                        children: [
                            {
                                value: 'layout',
                                label: 'Layout 布局',
                            },
                            {
                                value: 'color',
                                label: 'Color 色彩',
                            },
                        ],
                    },
                ],
            },
        ];

        const value = ref(['zhinan', 'daohang', 'cexiangdaohang']);
        const props = reactive({
            type: 'cascader',
            options,
        });
        const change = (data) => {
            console.log('data: ', data);
        };

        return {
            props,
            value,
            change,
            templateString: `<template>
    <sib-item v-model="value" :props="props" @change="change"></sib-item>
    <p>v-model 绑定值：{{ value }}</p>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
    setup() {
        const options = [
            {
                value: 'zhinan',
                label: '指南',
                children: [
                    {
                        value: 'shejiyuanze',
                        label: '设计原则',
                        children: [
                            {
                                value: 'yizhi',
                                label: '一致',
                            },
                            {
                                value: 'kekong',
                                label: '可控',
                            },
                        ],
                    },
                    {
                        value: 'daohang',
                        label: '导航',
                        children: [
                            {
                                value: 'cexiangdaohang',
                                label: '侧向导航',
                            },
                            {
                                value: 'dingbudaohang',
                                label: '顶部导航',
                            },
                        ],
                    },
                ],
            },
            {
                value: 'zujian',
                label: '组件',
                children: [
                    {
                        value: 'basic',
                        label: 'Basic',
                        children: [
                            {
                                value: 'layout',
                                label: 'Layout 布局',
                            },
                            {
                                value: 'color',
                                label: 'Color 色彩',
                            },
                        ],
                    },
                ],
            },
        ];

        const value = ref(['zhinan', 'daohang', 'cexiangdaohang']);
        const props = reactive({
            type: 'cascader',
            options,
        });
        const change = (data) => {
            console.log('data: ', data);
        };

        return { props, value, change };
    },
};
<\/script>`,
        };
    },
};
</script>
